<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
	       <h1>第04节--Class与Style绑定</h1>
	       <hr />
	       <h2>1.绑定HTML Class</h2>
	       <h2>#1.1 对象语法</h2>
	       <h2 v-bind:class="{active:isActive,'text-danger':hasError}">对象语法，传给v-bind:class一个对象</h2>
	       <h2 v-bind:class="classObject">对象语法，绑定的数据对象不必内联定义在模版里，可以挂在data上</h2>
	       <h2 v-bind:class="classObject2">对象语法，绑定一个返回对象的计算属性</h2>
	       <h2>#1.2 数组语法</h2>
	       <h2 v-bind:class="[activeClass,errorClass]">数组语法，传给 v-bind:class一个数组</h2>
	       <h2 v-bind:class="[isActive?'':'activeClass',errorClass]">数组语法，根据条件切换列表中的 class，可以用三元表达式</h2>
	       <h2 v-bind:class="[{active:isActive},errorClass]">数组语法，数组语法中使用对象语法</h2>
	       <h2>#1.3 用在组件上</h2>
	       <h2>当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖</h2>
	       <hr />
	       <h2>2.绑定内联样式</h2>
	       <h2>#2.1 对象语法</h2>
	       <h2 v-bind:style="{color:styleData.activeColor,fontSize:styleData.fontSize}">CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名</h2>
	       <h2 v-bind:style="styleData.styleObject">直接绑定到一个样式对象会让模版更清晰</h2>
	       <h2>#2.2 数组语法</h2>
	       <h2 v-bind:style="[styleData.styleObject,styleData.styleObject2]">v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上</h2>
		</div>
	</body>
</html>
